<template>
	<view class="content">
		<view class="banners-wrapper">
			<scroll-view scroll-x="true" class="scroll-view-wrapper">
				<view class="scroll-view-item" v-for="item in banners" :key="item.id" :class="[banners.length > 1 ? 'half_width' : 'all_width']">
					<image class="scroll-view-item-img" :src="item.img"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [
					{
						id: 1,
						img: 'https://cdn.pixabay.com/photo/2020/06/23/21/34/mountains-5333952__340.jpg'
					},
					{
						id: 2,
						img: 'https://cdn.pixabay.com/photo/2020/06/30/14/04/bridge-5356471__340.jpg'
					},
					{
						id: 3,
						img: 'https://cdn.pixabay.com/photo/2019/12/13/11/09/haifoss-4692722__340.jpg'
					}
				]
			}
		},
	}
</script>

<style>	
	.banners-wrapper {
		width: 750rpx;
		height: 180px;
	}
	.scroll-view-wrapper {
		white-space: nowrap;
		width: 100%;
		height: 100%;
	}
	.scroll-view-item {
		display: inline-block;
		height: 100%;
	}
	.scroll-view-item.half_width {
		width: 50%;
	}
	.scroll-view-item.all_width {
		width: 100%;
	}
	.scroll-view-item-img {
		width: 100%;
		height: 100%;
	}
</style>
